<@body1 title="平铺化菜单" class="page-sidebar-closed-hide-logo page-content-white page-sidebar-fixed">
<link rel="stylesheet" href="${ctxPath}/assets/iconfont/iconfont.css?${currentTimeMillis}">
<#--<link rel="stylesheet" href="${ctxPath}/assets/css/main.css?${currentTimeMillis}">-->
<link rel="stylesheet" href="${ctxPath}/webui/mega-tabcontent/css/mega-tabcontent.css?${currentTimeMillis}">
<link rel="stylesheet" href="${ctxPath}/webui/mega-tabcontent/css/mega-tabcontent-orange.css?${currentTimeMillis}">

<#--<link rel="stylesheet" href="${ctxPath}/assets/css/theme/theme-orange1.css?${currentTimeMillis}">-->
<#--<link rel="stylesheet" href="${ctxPath}/webui/mega-menu/css/mega-menu-orange1.css?${currentTimeMillis}">-->

<!-- BEGIN CONTENT -->
<div class="rb-page-content-wrapper" id="rb-main-content">
    <!--<div id="spinner">-->
    <!--<i class="fa fa-spinner spinner">-->
    <!--</i>-->
    <!--</div>-->
    <!-- BEGIN CONTENT BODY -->
    <div style="padding:20px">
        <button class="btn btn-danger btn-lg" id="toggle">tab页触发器</button>
    </div>
    <div class="rb-page-content" id="rb-main-content-container">
        <div class="rb-main-tabs-container">
            <ul class="nav nav-tabs rb-nav-tabs" id="rb-nav-tabs-visable">
            </ul>
            <!-- script模板是上面ul的子元素，由于将script模板标签放在上面的ul容器中js读取不到，因此放在下面 -->
            <script id="rb-nav-tabs-item" type="text/x-dot-template">
                <li>
                    <div class="glyphicon glyphicon-remove rb-tab-close"></div>
                    <div class="glyphicon glyphicon-refresh rb-tab-refresh"></div>
                    <a style="cursor:move" href="javascript:;" title="{{=it.allName}}" id="rb-tab-nav-{{=it.id}}">
                        {{=it.header}}
                    </a>
                </li>
            </script>

            <li class="dropdown pull-right rb-tabsmore">
                <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" aria-expanded="false">
                    <span class="badge" ng-cloak data-ng-bind="tabsCollapse.length"></span>
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" id="rb-nav-tabs-collapse">
                </ul>
                <!-- script模板是上面ul的子元素，由于将script模板标签放在上面的ul容器中js读取不到，因此放在下面 -->
                <script id="rb-nav-tabs-collapse-item" type="text/x-dot-template">
                    <li>
                        <a class="rb-collapse-tab" href="javascript:void(0);">
                       <span ng-cloak>
                         {{=it.header}}
                         <span class="glyphicon glyphicon-remove rb-remove-collapse-tab">
                         </span>
                       </span>
                        </a>
                    </li>
                </script>
            </li>

            <li class="dropdown pull-right rb-tabdrop">
                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" data-close-others="true">
                    <span class="glyphicon glyphicon-remove" style="font-size: large;color:#aaa"></span>
                    <b class="caret"></b>
                </a>

                <ul class="dropdown-menu dropdown-menu-default" id="rb-tabclose-container">
                    <li><a data-toggle="tab" id="rb-close-all">关闭所有</a></li>
                    <li><a data-toggle="tab" id="rb-close-other">关闭其他</a></li>
                </ul>
            </li>

            <div class="rb-tab-content-container">
                <div class="rb-tab-pane" id="rb-tab-pane">
                </div>
                <!-- script模板是上面div的子元素，由于将script模板标签放在上面的ul容器中js读取不到，因此放在下面 -->
                <script id="rb-breadcrumb" type="text/x-dot-template">
                    <ol class="breadcrumb rb-breadcrumb">
                        <span class="raxi raxi-0010home"></span>
                        {{ for(var i=0, breadcrumb=it.breadcrumbData; i<breadcrumb.length; i++){ }}
                        <li>
                            <span>{{=breadcrumb[i].name}}</span>
                        </li>
                        {{ } }}
                    </ol>
                </script>
                <!--<div id="containter-{{contentItem.id}}" class="tab-pane-content" ng-repeat="contentItem in tabContents" ng-class='contentItem .active?"active":""'></div>-->
            </div>
        </div>
    </div>
    <!-- END CONTENT BODY -->
</div>
<!-- END CONTENT -->

<script src="${ctxPath}/lang/array.js" charset="utf-8"></script>
<script src="${ctxPath}/lang/string.js" charset="utf-8"></script>
<script src="${ctxPath}/assets/js/rax.js" charset="utf-8"></script>
<script src="${ctxPath}/assets/js/rax-control.js" charset="utf-8"></script>
<script src="${ctxPath}/assets/mock/MenuData.js?${currentTimeMillis}" charset="utf-8"></script>
<script src="${ctxPath}/webui/mega-tabcontent/js/mega-tabcontent.js?${currentTimeMillis}"></script>
<script>
    $(function () {
        var megatab = $.fn.megatab();
        var menuData = _mockMenuData.body;
        $('#toggle').click(function(){
            megatab.onToggle(menuData[parseInt(Math.random()*menuData.length + 1)],menuData)
        })
    })
</script>
</@body1>